<template>
  <div class="horizontal-grid-container">
    <van-config-provider :theme-vars="themeVars">
      <van-grid :clickable="true" :column-num="5" :border="false" icon-size="30px">
        <van-grid-item icon="gem" icon-color="#646566" text="我的钱包" @click="ItemClick" />
        <van-grid-item icon="balance-list" icon-color="#646566" text="我的订单" @click="ItemClick" />
        <van-grid-item icon="send-gift" icon-color="#646566" text="收货地址" @click="AddressEdit" />
        <van-grid-item icon="shopping-cart" icon-color="#646566" text="购物车" @click="ShoppingCart" />
        <van-grid-item icon="invitation" icon-color="#646566" text="愿望单" @click="ItemClick" />
      </van-grid>
    </van-config-provider>
  </div>
</template>

<script setup>
import router from '../../route/index'

const themeVars = {
  gridItemContentPadding: '5px 0px',
  gridItemTextColor: '#000000'
}

const ItemClick = () => {
  console.log('点击宫格');
}

const AddressEdit = () => {
  router.push('/addresslist')
}

const ShoppingCart = () => {
  router.push('/shoppingcart')
}

</script>

<style scoped>
.horizontal-grid-container {
  border-bottom: 3px solid #f2f3f5;
  background-color: #fff;
}
</style>
